<template>
 
 <div class="home">
    <header class="head">
      <my-seach  @searchGoods="searchData"></my-seach>
     
    </header>
    <main class="main">
      <!-- 轮播图 -->
      <banner></banner>
     
      <!-- 菜单 -->
      <my-menu></my-menu>
      <!-- 秒杀 -->
      <second-kill></second-kill>
      <!-- 商品列表 -->
      <good-list :keyWord="keyWord"></good-list>
    </main>
    <footer class="foot">
      <my-footer></my-footer>
        
     
    </footer>
  </div>
</template>

<script setup lang="ts">
import banner from "@/components/banner.vue"
import MySeach from "@/components/MySeach.vue"
import MyFooter from "@/components/MyFooter.vue"
import MyMenu from "@/views/Home/components/MyMenu.vue"
import SecondKill from "@/views/Home/components/SecondKill.vue"
import GoodList from "@/views/Home/components/GoodList.vue"
import { ref } from "vue";
// 处理搜索列表数据
let keyWord = ref<string>("");
// 子传父的数据
const searchData = (val:any) => {
  keyWord.value = val;
};





</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .head {
    height: 54px;

  }
  .main {
    flex: 1;
    overflow-y: auto;
    background-color: #eee;
  }
  .foot {
    height: 50px;
   
  }
}
</style>
